<template>
    <div class="color-fff">
        <div class="pb-20 container" id="user-container" ref="box" v-show="!empty">
            <el-row :gutter="50" style="margin:0 !important" v-if="data.length > 0">
                <el-col :key="index" :span="8" v-for="(item, index) in data">
                    <div class="boxs radius10 colorFFF marginTop10 padding20" style="width: 100%;background-color: aquamarine;">
                        <div class="flexSB">
                            <div @click="toPath('/user-homepage?user_id=' + item.id)" class="flexFS hand" style="width: 80%;">
                                <el-avatar :size="55" :src="item.avatar"></el-avatar>
                                <div class="color333" style="width: 200px;margin-left:10px">
                                    <div class="size16 flexFS colorFFF">
                                        {{ item.name }}
                                        <!-- <img alt src="@/assets/image/vip-icon.png" srcset style="width: 50px;margin-left:10px"
                                        v-if="item.is_vip" />-->
                                    </div>
                                    <div class="colorFFF flexFS" style="margin-top:5px;width: 400px;">
                                        <span class="vertical-middle">
                                            <span>ID</span>
                                            <span class="pl-4">{{ item.id }}</span>
                                        </span>
                                        <span class="marginLeft20">
                                            <span>粉丝</span>
                                            <span class="pl-4">{{ item.fans_count }}</span>
                                        </span>
                                        <span class="marginLeft20">
                                            <span>作品</span>
                                            <span class="pl-4">{{ item.creation_count}}</span>
                                        </span>
                                    </div>
                                </div>
                            </div>

                            <div class="flexFS colorfff size14">
                                <div @click="attentionFun(item.id, item)" class="interest hand" v-if="item.attention == 0">关注</div>
                                <div @click="cancelAttentionFun(item.id, item)" class="followed hand" v-else>取消关注</div>
                            </div>
                        </div>

                        <div class="text-line2 height-44 mt-20" style="margin-left: 64px;">
                            <el-tooltip :content="item.subtitle" class="item" effect="dark" placement="top">
                                <span style="color: rgba(255,255,255,0.9);" v-if="item.subtitle">{{ item.subtitle }}</span>
                                <span style="color: rgba(255,255,255,0.2);" v-else>他(她)貌似有点高冷哦</span>
                            </el-tooltip>
                        </div>
                    </div>
                </el-col>
   
            </el-row>
            <div v-if="data.length > 0" style="margin-top: 30px;text-align: center;color: #83818B;">
            -没有更多内容了-
        </div>
            <div class="text-center color-fff font-15 width-100% height-30">
                <el-image :src="require('@/assets/gif/global_loading.gif')" fit="cover" style="width: 40px;height:30px;" v-show="append_loading"></el-image>
            </div>
        </div>
       
        <div class="flex jus-center flex-dre-column align-center" style="margin-top:15vh" v-show="empty">
            <el-image :src="require('@/assets/image/empty-black.png')" fit="cover" style="width: 15vw;height:15vw;"></el-image>
            <div class="mt-10 color-fff font-14">没找到相关内容</div>
        </div>
    </div>
</template>

<script>
import pageTool from '@/mixins/page'
export default {
    props: {
        keyword: String,
    },
    mixins: [pageTool],
    data() {
        return {
            query: {
                page: 1,
                size: 30,
            },
            choose_index: 0,
            empty: true,
        }
    },
    mounted() {
        this.query.keyword = this.keyword
        this.beforeInit()
        let box = document.getElementById('user-container')
        box.addEventListener('scroll', this.scrollInfo)
    },
    methods: {
        beforeInit() {
            this.url = '/search/user'
            this.append = true
            this.toInit()
        },
        reset(keyword) {
            this.data = []
            this.query.keyword = keyword
            this.empty = false
            this.query.page = 1
            this.toInit()
        },
        toPath(url) {
            this.$router.push(url)
        },
        toInit() {
            this.init()
                .then((res) => {
                    if (this.data.length == 0) {
                        this.empty = true
                    } else {
                        this.empty = false
                    }
                    console.log(this.data, 24234)
                })
                .catch((err) => {})
        },
        scrollInfo() {
            let e = document.getElementById('user-container')
            if (e.scrollTop + e.clientHeight >= e.scrollHeight - 50) {
                this.scroll()
            }
        },
        scroll() {
            if (this.append_loading == true) {
                return false
            }
            this.query.page++
            this.toInit()
        },

        attentionFun(id, item) {
            if (this.submitComplete) return
            this.submitComplete = true
            let that = this
            console.log(id)
            this.$request
                .post('/user-attention/create/' + id)
                .then((res) => {
                    this.submitComplete = false
                    item.attention = 1
                    this.$message({
                        message: '关注成功',
                        type: 'success',
                        customClass: 'messageClass',
                    })
                })
                .catch((error) => {
                    this.submitComplete = false
                })
        },
        //取消关注
        cancelAttentionFun(id, item) {
            console.log('item', item, id)
            if (this.submitComplete) return
            this.submitComplete = true
            this.$request
                .del('/user-attention/cancel/' + id)
                .then((res) => {
                    this.submitComplete = false
                    item.attention = 0
                    this.$message({
                        message: '已取消',
                        type: 'success',
                        customClass: 'messageClass',
                    })
                })
                .catch((error) => {
                    this.submitComplete = false
                })
        },
    },
}
</script>

<style lang="scss" scoped>
.container {
    height: calc(100vh - 4rem - 69px);
    overflow-y: scroll;
}
.container::-webkit-scrollbar {
    display: none;
}
.boxs {
    background-image: radial-gradient(#2d284b, #151225);
    opacity: 1;
    // filter: blur(100px);
}

.interest {
    width: 80px;
    background-color: #ff1c6d;
    color: #fff;
    height: 32px;
    line-height: 32px;
    border-radius: 50px;
    margin-left: 20px;
    text-align: center;
    font-size: 11px;
}

.followed {
    width: 80px;
    background-color: rgba(255, 255, 255, 0.6);
    color: #ffffff;
    height: 32px;
    line-height: 32px;
    text-align: center;
    margin-left: 20px;
    border-radius: 50px;
    font-size: 11px;
}
</style>